<template>
  <div class="table-render">
    <template v-if="table != null">
      <my-search ref="search" :columns="columns" :tableForm="tableForm" v-on="$listeners" @onQuery="onQuery">
        <slot name="query"></slot>
      </my-search>
      <div class="table-render-tools">
        <div class="tool-left">
          <slot name="tool-left"></slot>
        </div>
      </div>

      <div class="table-render-main">
        <my-table ref="myTable" stripe :columns="tableColumns" :loader="loaderFn">
          <!-- element-table 列的插槽 -->
          <template v-for="(col) in tableColumns" slot-scope="prop" :slot="col.prop" v-if="col.prop">
            <slot :name="col.prop" v-bind="prop">
              <template v-if="col.dictType">
                <sys-dict :dict-type="col.dictType" :value="prop.row[col.prop]"/>
              </template>
              <template v-else>
                {{prop.row[col.prop]}}
              </template>
            </slot>
          </template>
        </my-table>
      </div>

    </template>
  </div>
</template>

<script>

import myTable from '@/components/common/page/my-table'
import mySearch from './query/my-search'
export default {
  name: 'table-render',
  cnName: '表渲染',
  components: {
    myTable,
    mySearch
  },
  props: {
    table: Object,
    columns: Array,
    tableForm: Object,
    ctrlWidth: {
      type: String,
      default: '180px'
    },
    loader: Function,
    showSearch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    }
  },
  methods: {
    onQuery() {
      this.$refs.myTable && this.$refs.myTable.refresh(1)
    },
    loaderFn(currentPage, currentPageSize) {
      const model = Object.assign({}, this.$refs.search.model)
      model.pageNum = currentPage
      model.pageSize = currentPageSize
      return this.loader(model)
    }
  },
  computed: {
    tableColumns() {
      const arr = [
        {type: 'selection', align: 'center'},
        {type: 'index', label: '序号', align: 'center'},
      ]
      this.columns.forEach(o => {
        if(o.isList === '1') {
          arr.push({
            prop: o.columnName,
            label: o.columnComment,
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true,
            dictType: o.dictType,
            display: true
          })
        }
      })
      arr.push({ prop: 'ctrl', label: '操作', width: this.ctrlWidth, fixed: 'right', align: 'center' })
      return arr
    }
  },
  mounted() {

  }
}
</script>
<style scoped lang="scss">
.table-render {
  position: relative;
  padding: 0px;

  &-tools {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    margin: 10px 0;
    border-bottom: 4px solid #f5f5f5;
  }

  &-main {
    padding: 10px 20px;
  }
}
</style>
